<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>发表帖子</title>
    <style>
        body{
            padding: 0;
            margin: 0
        }
        
        input,
        textarea {
            outline: none;
            border-radius: 0;
            padding: 0;
            font-size: 14px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        
        body {
            color: #262a2e;
            font: 14px/1 "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        }
        
        .main {
            max-width: 640px;
            margin: 0 auto;
        }
        
        .inputArea {
            padding: 0 20px;
            color: #c8ccd4;
        }
        
        .title {
            border-bottom: 1px solid #e6e8eb;
        }
        
        .title textarea {
            font-weight: 700;
            line-height: 20px;
            max-height: 40px;
            height: 20px;
            width: 100%;
            border: none;
            margin: 15px 0;
            color: #262a2e;
            resize: none;
        }
        
        .title textarea::placeholder {
            color: #c8ccd4;
            font-weight: 400
        }
        
        .content {
            min-height: 400px;
            margin: 10px 0;
            text-align: justify;
            line-height: 20px;
            outline: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            line-height: 1.5
        }
        
        .content img {
            display: block;
            width: 33.3%;
            margin: 6px 0;
        }
        
        .content:before {
            content: '请输入内容'
        }
        
        .focus {
            color: #262a2e;
        }
        
        .focus:before {
            content: ''
        }
        
        .quesion {
            background: #fff;
            padding: 0 20px;
        }
        
        .quesion dl {
            border-top: 1px solid #e6e8eb;
        }
        
        .quesion dt {
            line-height: 42px;
        }
        
        .quesion span {
            font-size: 19px;
            margin-right: 5px;
            line-height: 30px;
            display: inline-block;
            vertical-align: top;
            font-weight: 500
        }
        
        .quesion dd {
            height: 42px;
            -webkit-box-flex: 1;
            flex: 1;
            -webkit-box-align: center;
            align-items: center;
        }
        
        .quesion img {
            height: 30px;
            vertical-align: middle
        }
        
        .quesion input {
            height: 20px;
            width: 70px;
            background: #e6e8eb;
            border: 0;
            padding: 5px;
            border-radius: 4px;
            font-size: 19px;
        }
        
        .button {
            background: #fff;
            border-top: 1px solid #e6e8eb;
            padding: 10px 20px;
        }
        
        .button button {
            font-size: 18px;
            border: none;
            width: 100%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #ff4149;
            border-radius: 20px;
        }
        
        .upFile {
            border-radius: 4px;
            border: 1px solid #ccc;
            z-index: 2;
            position: absolute;
            height: 42px;
            width: 42px;
            overflow: hidden;
            background: #fff url(https://bbs.jindanlicai.com/static/jindan/new/image.png) center no-repeat;
            background-size: 18px 16px;
            display: none
        }
        
        .upFile input {
            opacity: 0;
            height: 100px;
        }
        
        .fixed {
            position: fixed
        }
        
        .buttonArea {
            bottom: 0;
            right: 0;
            left: 0
        }
        
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            border-radius: 4px;
            transform: translate(-50%, -50%);
            max-width: 270px;
            line-height: 1.5;
            text-align: center;
            z-index: 100;
            padding: 12px;
            white-space: nowrap
        }
        
        .toast strong {
            font-size: 17px;
            display: block;
            padding-bottom: 5px;
        }
        
        .toast img {
            width: 17px;
            height: 17px;
            vertical-align: middle;
            margin-top: -3px;
            margin-right: 5px;
        }
        
        .v-fullLoad {
            background: rgba(255, 255, 255, .5);
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            z-index: 10;
        }
        
        .v-loading {
            text-align: center
        }
        
        .v-loading span {
            position: relative
        }
        
        .v-loading .loader em,
        .v-loading span {
            display: inline-block;
            vertical-align: middle
        }
        
        .v-loading .loader em {
            border: 2px solid rgba(0, 0, 0, .5);
            border-radius: 50%;
            border-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, .5) transparent transparent;
            -webkit-animation: v-loading .8s infinite ease;
            animation: v-loading .8s infinite ease;
            width: 13px;
            height: 13px
        }
        
        .v-loading .text {
            line-height: 20px;
            margin-left: 6px;
            color: #6a6d75
        }
        
        .v-large .loader {
            /*background: url(https://bm.jindanlicai.com/mvvm/v2/static/1da9024db3096fbffc.png) 50% no-repeat;*/
            background-size: 13px auto
        }
        
        .v-large .loader em {
            height: 28px;
            width: 28px;
            border-width: 3px
        }
        
        .v-large .text {
            display: none
        }
        
        @-webkit-keyframes v-loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
        
        @keyframes v-loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
        
        .v-large .loader em {
            height: 28px;
            width: 28px;
            border-width: 3px;
        }
    </style>
</head>

<body>
    <div class="main" id="app" :style="objectStyle2">
        <div class="upFile" :style="objectStyle">
            <input type="file" @change="readFile" accept="image/*">
        </div>
        <div class="inputArea">
            <div class="title">
                <textarea placeholder="请输入标题" v-model="title" @keydown="inputScroll" :style="'height:'+ titleHeight + 'px'" /></textarea>
            </div>
            <div id="content" class="content" :class="{focus:postContent}" @click="handleFocus" @blur="handleBlur" contenteditable="true" v-html="content" @input="changeContent"></div>
        </div>
        <div class="buttonArea" :class="{fixed:fixed}">
            <div class="quesion" v-if="hasCode.length">
                <dl>
                    <dt>验证问答，请输入下面问题的答案</dt>
                    <dd>
                        <span v-for="(item,index) in hasCode" :style="'color:' + color[index]">{{item}}</span>
                        <input type="tel" v-model="code" maxlength="2">
                    </dd>
                </dl>
            </div>
            <div class="button">
                <button @click="submit">发表</button>
            </div>
        </div>
        <span class="toast" v-show="toast" v-html="toast"></span>
        <div class="v-fullLoad" v-show="load">
            <div class=" v-loading v-large "><span class="loader "><em></em></span></div>
        </div>
    </div>
</body>
<script src="https://bbs.jindanlicai.com/static/jindan/new/vue.min.js " type="text/javascript"></script>
<script src="https://bbs.jindanlicai.com/static/jindan/new/fastclick.js " type="text/javascript"></script>
<script src="https://bbs.jindanlicai.com/static/jindan/new/upload.js " type="text/javascript"></script>
<script>
    var answer_md5 = "ee114e705abb43ab0ff91a1e834d209e";
    var answer = "71 - 8 = ?";
    var color = ['#ff4149', '#3075ff', '#ff9c31', '#6fd12e', '#ff4149', '#3075ff', '#ff9c31', '#6fd12e']
    var app = new Vue({
        el: '#app',
        data: {
            title: '',
            content: '',
            postContent: '',
            code: '',
            color: [],
            hasCode: answer.split(' '),
            top: 0,
            left: 0,
            fixed: 1,
            toast: '',
            load: '',
            titleHeight: 20
        },
        watch: {
            content: function() {
                this.postContent = this.content
            },
            toast: function() {
                var vm = this
                clearTimeout(vm.fn)
                vm.fn = setTimeout(function() {
                    vm.toast = ""
                }, 3000)
            }
        },
        computed: {
            objectStyle: function() {
                var vm = this
                return {
                    top: window.scrollY + vm.top - 52 + 'px',
                    left: vm.left - 21 + 'px',
                    display: 'block'
                }
            },
            objectStyle2: function() {
                var vm = this
                var height = 61
                if (this.fixed) {
                    if (this.hasCode.length) {
                        height += 85
                    }
                    return {
                        paddingBottom: height + 'px'
                    }
                } else {
                    return {}
                }
            }
        },
        methods: {
            inputScroll: function(event) {
                if (event.target.scrollTop > 0) {
                    this.titleHeight = 38
                } else {
                    this.titleHeight = 20
                }
            },
            changeContent: function(event) {
                this.postContent = event.target.innerHTML
                this.setUpfile()
            },
            setUpfile: function() {
                var pos = getSelectionCoords()
                this.left = pos.x
                this.top = pos.y
            },
            handleFocus: function(s) {
                this.setUpfile()
                this.fixed = 0
                clearTimeout(this.timer)
            },
            handleBlur: function() {
                var vm = this
                this.fixed = 1
                vm.timer = setTimeout(function() {
                    vm.left = -1000
                }, 300)
            },
            getHtml: function() {
                return this.postContent.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
                    return '[img]//bbs.jindanlicai.com' + capture + '[/img]'
                }).replace(/<[^/]*>/g, '\n').replace(/<[^>]*>/g, '')
            },
            submit: function() {

                var vm = this
                if (!this.title) {
                    return this.toast = "请输入帖子标题 "
                }
                if (!this.postContent) {
                    return this.toast = "请输入帖子内容 "
                }
                if (this.hasCode.length && !this.code) {
                    return this.toast = "请输入验证码 "
                }
                vm.load = 1
                ajax({
                    url: 'https://bbs.jindanlicai.com/forum.php',
                    data: {
                        answer: vm.code,
                        answer_md5: answer_md5,
                        subject: vm.title,
                        message: vm.getHtml(),
                        mod: "post",
                        action: "newthread",
                        fid: "42",
                        extra: '',
                        topicsubmit: "yes",
                        mobile: 2,
                        geoloc: '',
                        handlekey: "postform",
                        inajax: 1,
                        formhash: "408ea893",
                        posttime: "1547790887",
                        jindan: 1
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function(result) {
                        vm.load = 0

                        if (result.error_code == 0) {
                            vm.toast = "<strong><img src='https://bbs.jindanlicai.com/static/jindan/new/success.png' />发表成功</strong>新的帖子需要审核，待审核通过后才能显示"
                            setTimeout(function() {
                                location.href = result.data.url
                            }, 3000)
                        } else {
                            vm.toast = result.message
                        }
                    }
                })
            },
            // 图片上传 
            readFile: function(event) {
                var vm = this
                var file = event.target.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function() {
                    vm.compressImg(file, reader.result)
                }
                reader.onerror = function(e) {
                    alert("Error" + e)
                }
                vm.load = 1
            },
            compressImg: function(file, sourceImg) {
                var vm = this;
                var canvas = document.createElement('canvas');
                EXIF.getData(file, function() {
                    EXIF.getAllTags(this);
                    var mpImg = new MegaPixImage(file);
                    mpImg.render(canvas, {
                            maxWidth: 750,
                            orientation: EXIF.getTag(this, 'Orientation')
                        },
                        function() {
                            var thumbImg = canvas.toDataURL("image/png", .5);
                            vm.postImg(thumbImg)
                        });
                });
            },
            postImg: function(data) {
                var vm = this
                ajax({
                    url: "//bbs.jindanlicai.com/misc.php",
                    data: {
                        mod: 'jindan',
                        operation: 'uploadimg',
                        file: data
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function(result) {
                        if (result.error_code == 0) {
                            vm.getCursortPosition(result.data.file)
                        } else {
                            vm.toast = result.message
                        }
                    }
                })
            },
            getCursortPosition: function(src) {
                var html = ['<img src="', src, '">'].join('')
                var sel = window.getSelection()
                if (sel.getRangeAt && sel.rangeCount) {
                    var range = sel.getRangeAt(0);
                    var temp = document.createElement('div');
                    range.deleteContents();
                    temp.innerHTML = html
                    var frag = document.createDocumentFragment();
                    var node
                    var lastNode
                    while ((node = temp.firstChild)) {
                        lastNode = frag.appendChild(node)
                    }
                    range.insertNode(frag);
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.collapse(true);
                        sel.removeAllRanges();
                        sel.addRange(range)
                    }
                } else {
                    var editer = document.querySelector('#content');
                    editer.innerHTML = editer.innerHTML + html
                }
                this.postContent = document.querySelector('#content').innerHTML
                this.load = 0
            }
        },
        created: function() {
            this.postContent = this.content
            for (var i =
                    0; i <
                this.hasCode.length; i++) {
                this.color.push(color[Math.floor(Math.random() * color.length)])
            }
        }
    })
</script>

</html>